<template>
  <div class="screen1080pC-map">
    <mapNav></mapNav>
    <mapCounter></mapCounter>
    <mapPopover :clickData="clickData"></mapPopover>
    <mapViewToggle :view="view" @changeView="changeView"></mapViewToggle>
    <echartsMap class="echartsMap" v-if="mapInited" :chartOption="chartOption" :chartData="chartData" @mapClick="mapClick" @mapAction="mapAction"></echartsMap>
  </div>
</template>
<script>
const symbol = {
0:'path://m569.52,440.01c18.46,31.99-4.71,71.99-41.58,71.99H48.05c-36.94,0-60-40.05-41.58-71.99L246.42,23.99c18.47-32.01,64.72-31.95,83.15,0l239.94,416.03h0Zm-281.52-86.01c-25.4,0-46,20.6-46,46s20.6,46,46,46,46-20.6,46-46-20.6-46-46-46Zm-43.67-165.35l7.42,136c.35,6.36,5.61,11.35,11.98,11.35h48.55c6.37,0,11.64-4.98,11.98-11.35l7.42-136c.38-6.87-5.1-12.65-11.98-12.65h-63.38c-6.88,0-12.36,5.78-11.98,12.65h0Z',
};

import themeChart from "@/mixins/themeChart"
import {map} from "@/api/api"
export default {
  // name: "blockCenter",
  mixins: [themeChart],
  components: {
    mapPopover:() => import("./map-popover.vue"),
    mapNav:() => import('./map-nav'),
    mapCounter:() => import('./map-counter'),
    mapViewToggle:() => import('./map-viewToggle'),
  },
  data() {
    return {
      mapInited:false,
      view:{
        data:[
          {title:"枪械分布",label:"data1"},
          {title:"DY分布",label:"data2"},
          // {title:"风险分布",label:"data3"},
          // {title:"实力排名分布",label:"data4"},
        ],
        current:"data1"
      },
      chartData:{
        alladcode:[],
        geoJson:{},
        dept:[{code:100000,name:"全国"}, ],
        visualMapColors:[$c.bll9,$c.inr5],
        mapData:[],
        pointData:[],
        pinData:[],
        circleData:[],
        warningData:[],
        dangerData:[],
        sum:0,
        // navHide:true,
        navPos:["17%",,,"26.5%"],
        maxData:4000000,
        minData:9,
        maxPin:75,
        minPin:40,
      },
      chartOption:{update:false},
      clickData:{
        show:false,
        area:"北京",
        data:"325",
        x:120,
        y:120
      }
    };
  },
  computed: {
    publicUrl(){
      if(process.env.NODE_ENV=="development"){
        return "http://127.0.0.1/maps/"
      }else if(process.env.NODE_ENV=="production"){
        return "./maps/"
      }
    },
    pinColor(){
      const {view}=this;
      if(view.current=="data1"){
        return [$c.aql2,$c.cyl5,$c.cyl9]
      }else if(view.current=="data2"){
        return [$c.cyl3,$c.cbl4,$c.bll9]
      }else if(view.current=="data3"){
        return [$c.orl3,$c.rel5,$c.wh]
      }else if(view.current=="data4"){
        return [$c.pul3,$c.inl6,$c.wh]
      }
    },
    
  },
  watch:{
    // "$vuex.state.globalConfig.theme"(val){
    //   let bred=this.chartData.dept
    //   this.processOption(bred[bred.length-1])
    // },
  },
  methods: {
    changeView(item){
      let dept=this.chartData.dept
      this.view.current=item.label;
      this.clickData.show=false;
      this.getMapData(dept[dept.length-1]);
    },
    processMapData(current){//4th 处理时间线的 柱状图数据
      // const {chartData,circleData,sum}=this

      const {chartData,chartOption,processTimeLine}=this
      const {mapData,pointData,pinData,circleData,warningData,dangerData,sum,dept,maxData,minData,maxPin,minPin}=chartData
      // let currentDept=dept[dept.length-1]
      // let seriesData=convertData(circleData['code'+currentDept.code],currentDept)
      let mapD=[]
      
        
      mapD.push(
        {
          data: pointData,
          geoIndex: 0,
          type:'map',
        },
        {
          symbolSize: 5,
          emphasis:{ label: { show: false } },
          label: {//ayinMark
            //formatter: '\n{b}',
            formatter: p => {
              switch (p.data.name) { 
                case '内蒙古自治区': p.data.name = "内蒙古" 
                break; 
                case '西藏自治区': p.data.name = "西藏" 
                break; 
                case '新疆维吾尔自治区': p.data.name = "新疆" 
                break; 
                case '宁夏回族自治区': p.data.name = "宁夏" 
                break; 
                case '广西壮族自治区': p.data.name = "广西" 
                break; 
                case '香港特别行政区': p.data.name = "香港" 
                break; 
                case '澳门特别行政区': p.data.name = "澳门" 
                break; 
                default: break; 
              }
              return "\n"+p.data.name
            },
            position: 'center',
            align:"center",
            show: false,
            color: $c.wh,
            fontSize: 12,
          },
          symbolOffset: [0, -10],
          itemStyle: {
            color: '#fff'
          },
          name: 'light',
          type: 'scatter',
          coordinateSystem: 'geo',
          zlevel: 2,
          data: pointData,
        },
        {
          type: 'scatter',
          symbol: 'circle',
          coordinateSystem: 'geo',
          symbolOffset: [0, -10],
          large:true,
          label: {
            show: false,
          },
          emphasis: {
            label: {
              fontSize: 14,
              color:this.pinColor[2],
              fontWeight:"bold",
              // formatter: function(para) { return para.data.value[2] },//para.data.name +" : " + 
            }
          },
          itemStyle: {
            color: $c.darken(this.pinColor[1],1),
          },
          symbolSize:15,
          data: circleData,
          zlevel: 2,
        },
        {
          type: 'scatter',
          symbol: 'pin',
          // type: 'effectScatter',
          // symbol: 'circle',
          coordinateSystem: 'geo',
          // rippleEffect: { brushType: 'stroke' },
          // showEffectOn: 'render',
          symbolOffset: [0, -10],
          large:true,
          label: {
            show: true,
            position:"inside",
            //offset:[0 ,5],
            align:"center",
            color: this.pinColor[2],
            fontSize: 10,
            formatter: p => {
              if(p.data.value[2].toString().length>4){
                return (p.data.value[2]/10000).toFixed(0)+"万"
              }else{
                return p.data.value[2]
              }
            },
            // rich: { val:{ padding:[20,0,20,0], fontSize: 12, color:$c.re, }, cnNum: { fontSize: 12, color:$c.wh, } },
          },
          emphasis: {
            label: {
              fontSize: 14,
              color:this.pinColor[2],
              fontWeight:"bold",
              // formatter: function(para) { return para.data.value[2] },//para.data.name +" : " + 
            }
          },
          itemStyle: {
            color:{
              type: 'radial', x: 0.3, y: 0.3, r: 0.5,
              colorStops: [
                { offset: 0, color: this.pinColor[0] }, 
                { offset: 1, color: this.pinColor[1] }
              ],
              global: false // 缺省为 false
            }
          },
          symbolSize: (val)=> {
            var a = (maxPin - minPin) / (maxData - minData);
            var b = maxPin - a * minData;
            b = maxPin - a * maxData;
            return a * val[2] + b * 1.3;
          },
          data: pinData,
          zlevel: 2,
        },
        {
          type: "scatter",
          symbol: symbol[0],
          coordinateSystem: 'geo',
          symbolOffset: [0, -10],
          label: { show: false, },
          
          itemStyle: {
            color: {
              type: 'radial', x: 0.3, y: 0.3, r: 0.5,
              colorStops: [
                { offset: 0, color: $c.yel1}, 
                { offset: 1, color: $c.yel6}
              ],
              global: false // 缺省为 false
            },
          },
          symbolSize: 24,
          emphasis: { scale:1.5,},
          data: warningData,
          zlevel: 2,
        },
        {
          type: "scatter",
          symbol: symbol[0],
          coordinateSystem: 'geo',
          symbolOffset: [0, -10],
          label: { show: false, },
          
          itemStyle: {
            color: {
              type: 'radial', x: 0.3, y: 0.3, r: 0.5,
              colorStops: [
                { offset: 0, color: $c.rel3}, 
                { offset: 1, color: $c.rel5}
              ],
              global: false // 缺省为 false
            },
          },
          symbolSize: 24,
          emphasis: { scale:1.5,},
          data: dangerData,
          zlevel: 2,
        }
        
      )

      chartOption.series=mapD
      this.mapInited=true
    },
    processOption(current){//3rd 初步处理图表配置项
      if(!current){
        let bred=this.chartData.dept
        current=bred[bred.length-1]
      }
      const {chartData,chartOption,processMapData,getColor}=this
      let tempOption={
        title: {
          show:false,
          text: current.name,
          left: 'center'
        },
        
        geo:{
          type: 'map',
          map: current.name,
          roam: true,
          scaleLimit: {
            min: .5,
            max: 3
          },
          //zoom :1.2,
          layoutCenter:chartData.dept.length === 1 ?  ['50%', '65%'] :  ['50%', '50%'],
          layoutSize:chartData.dept.length === 1 ? "95%" : "85%",
          zlevel:1,
          label: {
            show: true,
            color:getColor("actFC"),
            fontSize: 12,
            formatter: p => {
              switch (p.name) { 
                case '内蒙古自治区': p.name = "内蒙古" 
                break; 
                case '西藏自治区': p.name = "西藏" 
                break; 
                case '新疆维吾尔自治区': p.name = "新疆" 
                break; 
                case '宁夏回族自治区': p.name = "宁夏" 
                break; 
                case '广西壮族自治区': p.name = "广西" 
                break; 
                case '香港特别行政区': p.name = "香港" 
                break; 
                case '澳门特别行政区': p.name = "澳门" 
                break; 
                default: break; 
              } 
              return p.name; 
            },
            //offset:[0,10],
          },
          emphasis: {
            label: {
              color:getColor("actFCS"),
              fontSize: 14,
              show: true
            },
            itemStyle: {
              areaColor: {
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                  { offset: 0, color: $c.fade($c.bil7,.4) }, 
                  { offset: 1, color: $c.fade($c.bll9,.9) }
                ],
              },
            }
          },
          itemStyle: {
            borderColor: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [
                { offset: 0, color: getColor("mapBDA") }, 
                { offset: 1, color: getColor("mapBDB") }
              ], false),
            borderWidth: 1,
            shadowColor: getColor("mapSD"),
            shadowOffsetY: 0,
            shadowBlur: 20,
            areaColor: {
              x: 0, y: 0, x2: 0, y2: 1,
              colorStops: [
                { offset: 0, color: $c.fade(getColor("mapBGA"),.5) }, 
                { offset: 1, color: $c.fade(getColor("mapBGB"),.5) }
              ],
            },
            emphasis: {
              areaColor: {
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [
                  { offset: 0, color: $c.fade(getColor("mapBGHA"),.5) }, 
                  { offset: 1, color: $c.fade(getColor("mapBGHB"),.5) }
                ],
              },
            },
          },
        },
        series: [ ]
      }
      tempOption.visualMap={
        left:"26%",
        bottom:"4%",
        min:0,
        max:chartData.maxData,
        seriesIndex:0,
        orient:"horizontal",
        inRange:{
          color:chartData.visualMapColors, //控制颜色渐变的范围
        },
        textStyle:{
          color:getColor("staFC")
        },
        calculable: true //出现滑块
      }
      // if(this.view.current=="data4"){
      // }else{
      //   tempOption.visualMap=null
      // }
      for(let a in tempOption){
        chartOption[a]=tempOption[a]
      }
      chartOption.update=true;
      processMapData(current)
    },
    getMapData(current) {//2nd 生成地图假数据 ------------ 开发过程中，这个方法要替换成根据地图参数获取服务器数据的方法！
      const {chartData,processOption}=this
      let mapData = [],pointData=[] ,pinData = [], circleData = [],warningData = [],dangerData = [], sum = 0
      chartData.geoJson.features.forEach(j => {
        if(j.properties.name){
          let value = (Math.random() * chartData.maxData/5).toFixed(0)
          if(value<1000){
            value=0
          }
          
          mapData.push({
            name: j.properties.name,
            value: value,
            cityCode: parseInt(j.properties.adcode)
          })
          if(j.properties.center){
            let dataArea=["北京市","辽宁省","内蒙古自治区","四川省","广东省"],//伪造几个特定的top5区域
                dataNum=[920388,3420388,3420388,4420388,2420388]//伪造几个特定的top5数据
            if(value>0&&dataArea.includes(j.properties.name)){//Top5区域数据
              let location
              dataArea.forEach((item,i)=>{if(item==j.properties.name){location=i}})
              pinData.push({
                name: j.properties.name,
                value: [j.properties.center[0], j.properties.center[1], dataNum[location]],
                cityCode: parseInt(j.properties.adcode)
              })
            }else{//其他区域数据
              circleData.push({
                name: j.properties.name,
                value: [j.properties.center[0], j.properties.center[1], value],
                cityCode: parseInt(j.properties.adcode)
              })
            }

            
            if(dataArea.includes(j.properties.name)){//地图小点数据
              let location
              dataArea.forEach((item,i)=>{if(item==j.properties.name){location=i}})
              value=dataNum[location]
              pointData.push({
                name: j.properties.name,
                value: [j.properties.center[0], j.properties.center[1], dataNum[location]],
                cityCode: parseInt(j.properties.adcode)
              })
            }else{
              pointData.push({
                name: j.properties.name,
                value: [j.properties.center[0], j.properties.center[1], value],
                cityCode: parseInt(j.properties.adcode)
              })
            }
              

            if(j.properties.name=="北京市"||j.properties.name=="新疆维吾尔自治区"){//伪造告警数据warning
              warningData.push({
                name: j.properties.name,
                value: [j.properties.center[0], j.properties.center[1]-1, 'warning'],
                cityCode: parseInt(j.properties.adcode)
              })
            }
            if(j.properties.name=="西藏自治区"){//伪造告警数据danger
              dangerData.push({
                name: j.properties.name,
                value: [j.properties.center[0], j.properties.center[1]-1, 'danger'],
                cityCode: parseInt(j.properties.adcode)
              })
            }
          }
          sum += value
        }
      })
      chartData.mapData=mapData;
      chartData.pointData=pointData;
      chartData.pinData=pinData;
      chartData.circleData=circleData;
      chartData.warningData=warningData;
      chartData.dangerData=dangerData;
      chartData.sum=sum;
      processOption(current)
    },
    async initChart(current) {//1st 从地图文件 获取geojson数据 
      const {chartData,getMapData}=this
      if(chartData.alladcode.length==0){
        await map(this.publicUrl,'all.json').then((res) => {
          chartData.alladcode=res;
        }).catch(function (err) {
          ce("getmap",err);
        });
      }
      // chartData.geoJson = await this.getGeoJson(geoCode+'_geojson_full.json');
      await map(this.publicUrl,current.code+'_geojson_full.json').then((res) => {
        chartData.geoJson=_.assign(res,current)
      }).catch(function (err) {
        ce("getmap",err);
      });
      getMapData(current);
      
    },
    mapAction(params){
      const {clickData}=this;
      clickData.show=false;
    },
    mapClick(params){
      const {clickData}=this;
      const {alladcode,initChart,dept}=this.chartData;
      clickData.show=false;
      if(dept[dept.length-1].name!=params.name){
        if(params.componentType=="geo"||(params.componentType=="series"&&params.componentSubType=='map')){
          let regionCode = alladcode.filter(areaJson => areaJson.name === params.name)[0].adcode;
          let obj={
            code:regionCode,
            name:params.name,
          }
          this.initChart(obj)
          if(dept[dept.length-1].name!=params.name){
            dept.push({code:regionCode,name:params.name});
          }
        }else if(params.code){
          this.initChart(params)
        }
      }
      if(params.componentType=="series"&&params.componentSubType=='scatter'){
        if(params.value[2]=="warning"){
          console.warn("warningInfo")
        }else if(params.value[2]=="danger"){
          console.error("dangerInfo")
        }else{
          clickData.area=params.name
          clickData.data=params.data.value[2]
          clickData.x=params.domPosition[0]
          clickData.y=params.domPosition[1]
          // clickData.x=params.event.offsetX
          // clickData.y=params.event.offsetY
          clickData.show=true
        }
      }
      
      
    },
    chartTheme(){
      let visualColor=this.$vuex.state.palette.chart.visual
      this.chartData.visualMapColors=this.getPalette({
        total:15,
        actual:5,
        palette:visualColor
      })
      // this.viewColor(this.chartData[0].colors)
    }
  },
  
  mounted() {
    const {chartData}=this
    this.initChart(chartData.dept[0]);

  },
  beforeDestroy(){
    
  },
  destroyed(){
  },
};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less">
.screen1080pC-map{.poa; .fullbox;
  .echartsMap{.poa; .fullbox; .bgc(@tr); }
}
</style>
